<template>
    <div>
        <Header :title="title"/>
        <div class="content">
            <el-row>
                <el-col :span="span" v-for="(item,index) in list " :key="index">
                    <div class="item" @click="click(item)">{{item.title}}</div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import Header from "./slide-header";

    export default {
        name: "slide-bar",
        components: {Header},
        props: {
            list: {
                type: Array,
                default: () => []
            },
            title: {
                type: String,
                defaultL: () => '新品展示'
            },
            span: {
                type: Number,
                default: () => 12
            }
        },
        methods:{
            click(){
                this.$router.push('/product-list')
            }
        }
    }
</script>

<style scoped lang="scss">
    .item {
        padding: 6px;
        cursor: pointer;
        text-align: center;
    }

    .item:hover {
        color: chocolate;
        text-decoration: underline;
    }

    .content {
        background: #eeeeee;
    }
</style>